<template>

	<view class="mainbgc" v-if="pagesshow">
		<header-top :messageInfo="{typeFlag:true,message:'拜访客户',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexright">
					<view class="add" @click="jumpurl('/pages/workbench/jiben/kehudaadd')"></view>
				</view>
			</view>
		</header-top>
		<!-- //搜索内容-->
		<u-popup round="20" :show="show" @close="close">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">时间</view>
				<view class="flexleft" style="flex-wrap: wrap;">
					<view class="screenbox flexcenter" v-for="(item,index) in datelist" :key="item.id"
						@click="change(item.name,index)">
						<view :class="currents == index? 'itemscreenfocus margin_top':'itemscreen margin_top'">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="starttime">
						<input class="itemscreen margin_top" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="endtime">
						<input class="itemscreen margin_top" type="text" disabled v-model="end">
					</view>
				</view>
				<view class="strongtext margin_top">其他</view>
				<view class="flexbetween selectboxtop2 margin_top" @click="khPianQuShow= true">
					<input type="text" placeholder="选择客户片区" disabled="true" v-model="khPianQuText">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top" @click="khDengJiShow = true">
					<input type="text" placeholder="选择客户等级" disabled="true" v-model="khDengJiText">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top" @click="khLeiBieShow = true">
					<input type="text" placeholder="选择客户类别" disabled="true" v-model="khLeiBieText">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top" @click="khXianLuShow=true">
					<input type="text" placeholder="选择客户线路" disabled="true" v-model="khXianLuText">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween selectboxtop2 margin_top"
					@click="selectRole2('/pages/workbench/jiben/yuangongda?type=2')">
					<input type="text" placeholder="选择业务员" disabled="true" v-model="staff_name">
					<view class="righticon2"></view>
				</view>
				<view class="flexbetween">
					<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
					<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="surepop">确认</view>
				</view>

			</view>
		</u-popup>
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="sousuo margin_right" @click="show=true">筛选</view>
				<input class="input-text" type="text" placeholder="请输入客户名称" v-model="keyword">
				<view class="sousuo" @click="init">搜索</view>
			</view>
			<!-- 占位图 -->
			<view class="strongtext flexbetween margin_top">
				<view>共计：{{list.total}}个</view>
				<view class="flexright">
					<view>已拜访：<text style="color: #ffa126;">{{allNum.visit_num}}</text>个,</view>
					<view>未拜访：<text style="color: #ff0000;">{{allNum.no_visit_num}}</text>个</view>
				</view>
			</view>
			<view class="flexcenter" v-if="!list.total">
				<view class="placeholderimage"></view>
			</view>
			<view class="mainpadding_top ffffff radius" v-if="list.total" v-for="item in list.data" :key="item.id"
				@click="bfCustome(item.id)">
				<view class="flexbetween" style="position: relative;">
					<view class="flexleft">
						<view class="titletext margin_right" style="color: #0bbdcb;">{{item.customtype.name}}</view>
						<view class="titletext">{{item.name}}</view>
					</view>
					<!-- 等级 -->
					<view class="ylable importfive flexcenter">{{item.customlevel.name}}</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="dizhi">
						<view class="flexbetween">
							<view class="dizhitxt flexleft">
								<view class="flexleft" @click="edit('/pages/workbench/jiben/yuemx?id=',item.id)">
									<view>余额：</view>
									<view class="xiaolan margin_right" style="text-decoration: underline;">{{item.money}}
									</view>
								</view>
								<view class="flexleft" @click="edit('/pages/workbench/jiben/jifenmx?id=',item.id)">
									<view>积分：</view>
									<view class="xiaolan margin_right" style="text-decoration: underline;">{{item.score}}
									</view>
								</view>
							</view>
							<view class="xiaohong" v-show="item.visit_status1==1">拜访中</view>
						</view>
						<view class="flexleft">
							<view class="dizhitxt margin_right margin_top2">联系人：{{item.username}}
							<text  @click.stop="phone(item.mobile)">{{item.mobile}}</text>
								</view>
						</view>
						<view class="margin_top2">
							<text>来源：</text>
							<text class="xiaohuang ">{{item.ly_type==1?"平台":item.ly_type==2?"小程序":"业务员"}}</text>
						</view>
						<view class="dizhitxt margin_top2">
							业务员：{{item.staff.username}} <text  @click.stop="phone(item.staff.mobile)">{{item.staff.mobile}}</text></view>
						<view class="smalltext margin_top2" v-if="item.notes">业务范围：{{item.notes}}</view>
						<view class="flexleft margin_top2">
							<view class="smalltext">地址：{{item.cityinfo}}{{item.address}}</view>
							<view class="addresstext">{{kmUnit(Number(item.distance))}}</view>
						</view>
					</view>
					<view class="flexright">
						<view class="addressicon margin_right" @click.stop="openmap(item)"></view>
						<view class="phoneicon" @click.stop="phone(item.mobile)"></view>
					</view>
				</view>
				<view class="flexbetween bghui margin_top2">
					<view class="">
						<text class="xiaohei" style="color: #333;">未拜访天数：</text>
						<text class="xiaohong">{{item.no_visit_days}}</text>
					</view>
					<view class="">
						<text class="xiaohei" style="color: #333;">未采购天数：</text>
						<text class="xiaohong">{{item.no_sale_days}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 开始时间选择器 -->
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows = false">
		</u-datetime-picker>
		<!-- 结束时间选择器 -->
		<u-datetime-picker :show="showss" v-model="value2" mode="date" :minDate="mindates" @confirm="confirms"
			@cancel="showss = false"></u-datetime-picker>
		<selectKHDengJi :message="{khDengJiShow:khDengJiShow}" @khDengJiSure="khDengJiSure"></selectKHDengJi>
		<!-- 客户等级 -->
		<selectKHLeiBie :message="{khLeiBieShow:khLeiBieShow}" @khLeiBieSure="khLeiBieSure"></selectKHLeiBie>
		<!-- 客户类别 -->
		<selectKHPianQu :message="{khPianQuShow:khPianQuShow}" @khPianQuSure="khPianQuSure"></selectKHPianQu>
		<!-- 客户片区 -->
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
		<selectKHXianLu :message="{khXianLuShow:khXianLuShow}" @khXianLuSure="khXianLuSure"></selectKHXianLu><!-- 客户线路 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				pagesshow: false,
				// 客户等级
				khDengJiShow: false,
				khDengJiText: "",
				custom_level_id: "", //客户等级ID
				// 客户类别
				khLeiBieShow: false,
				khLeiBieText: "",
				custom_type_id: "", //客户类别ID
				// 客户片区
				khPianQuShow: false,
				khPianQuText: "",
				custom_area_id: "", //客户片区ID
				// 客户线路
				khXianLuShow:false,
				khXianLuText:"",
				custom_line_id:"",//客户线路ID
				datelist: [{
						id: 1,
						name: '今日'
					},
					{
						id: 2,
						name: '昨日'
					},
					{
						id: 3,
						name: '本月'
					}
				],
				start: '开始时间',
				end: '结束时间',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mindates:Number(new Date()),
				currents: -1,
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: [],
					statistical: [{
						name: "",
						number: "",
					}]
				},
				lat: "35.17466",
				lng: "109.67307",
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				currentId: "",
				keyword: "",
				allNum:{},
				staff_id:"",
				staff_name:"",
			}
		},
		onShow() {
			let that = this
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				that.staff_id = data.id
				that.staff_name = data.name
				return false
			})
			// #ifdef APP-PLUS
			this.getlocation()
			// #endif
			// #ifdef MP-WEIXIN || H5
			this.init()
			// #endif
		},
		methods: {
			bfCustome(id) {
				uni.navigateTo({
					url:"/pages/workbench/xiaoshou/baifangmd?id="+id
				})
			},
			delItem(id) {
				this.modal.modalShow = true
				this.modal.title = "确定删除当前内容吗"
				this.currentId = id
			},
			modalSure() {
				httpRequest.request('/dhtapi/Custom/deleteCustom', 'POST', {
					id: this.currentId
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg)
					if (res.code == 1) {
						this.init()
					}
				})
			},
			khDengJiSure(e) { //客户等级
				if (e) {
					this.khDengJiText = e.value[0].name
					this.custom_level_id = e.value[0].id
				}
				this.khDengJiShow = false
			},
			khLeiBieSure(e) { //客户类别
				if (e) {
					this.khLeiBieText = e.value[0].name
					this.custom_type_id = e.value[0].id
				}
				this.khLeiBieShow = false
			},
			khPianQuSure(e) { //客户片区
				if (e) {
					this.khPianQuText = e.value[0].name
					this.custom_area_id = e.value[0].id
				}
				this.khPianQuShow = false
			},
			khXianLuSure(e){//客户线路
				if (e) {
					this.khXianLuText = e.value[0].name
					this.custom_line_id = e.value[0].id
				}
				this.khXianLuShow = false
			},
			// 获取当前位置信息
			getlocation() {
				let _this = this
				// uni.showLoading({
				// 	title:"请稍候"
				// })
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						console.log("获取经纬度信息", res)
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					},
					fail(err) {
						httpRequest.toast("获取经纬度失败，请打开定位重试")
						uni.hideLoading()
					}
				});
			},
			init(isPage, page) {
				this.getNum()
				let _this = this;
				httpRequest.request("/dhtapi/Custom/index", 'POST', {
					page: page || 1,
					limit: _this.limit,
					keyword: this.keyword,
					lng: this.lng,
					lat: this.lat,
					start_time: this.start == '开始时间' ? '' : this.start, //开始日期
					end_time: this.end == '结束时间' ? '' : this.end, //结束日期
					custom_area_id: this.custom_area_id,
					custom_level_id: this.custom_level_id,
					custom_type_id: this.custom_type_id,
					staff_id:this.staff_id,
					custom_line_id:this.custom_line_id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							_this.list.data = resList.data;
						}
						this.pagesshow = true
					}
					uni.hideLoading()
				}).catch(err => {
					httpRequest.toast(err.msg);
					uni.hideLoading()
				})
			},
			getNum() {
				let _this = this;
				httpRequest.request("/dhtapi/Custom/customVisitData", 'POST', {
					page: this.page || 1,
					limit: _this.limit,
					keyword: this.keyword,
					lng: this.lng,
					lat: this.lat,
					start_time: this.start == '开始时间' ? '' : this.start, //开始日期
					end_time: this.end == '结束时间' ? '' : this.end, //结束日期
					custom_area_id: this.custom_area_id,
					custom_level_id: this.custom_level_id,
					custom_type_id: this.custom_type_id,
					staff_id:this.staff_id,
					custom_line_id:this.custom_line_id
				}, false, false, true).then(res => {
					this.allNum = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			selectRole2(url) {
				uni.navigateTo({
					url
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			// 筛选弹出层确认
			surepop() {
				this.show = false
				this.init()
			},
			resetbtn() {
				this.start = "开始时间"
				this.end = "结束时间"
				this.currents = -1
				this.show = false
				this.custom_area_id = ""
				this.khDengJiText = ""
				this.khLeiBieText = ""
				this.khPianQuText = ""
				this.khXianLuText = ""
				this.staff_id = ""
				this.staff_name = ""
				this.custom_line_id = ""
				this.custom_type_id = ""
				this.custom_level_id = ""
				this.init()
			},
			cancel() {
				this.show = false;
			},
			jumpurl(url) {
				uni.navigateTo({
					url: url
				})
			},

			change(name, index) {
				if (name == "今日") {
					this.start = this.riqi(0);
					this.end = this.riqi(0);
				} else if (name == "昨日") {
					this.start = this.riqi(-1);
					this.end = this.riqi(-1);
				} else if (name == "本月") {
					this.start = this.benyue();
					this.end = this.riqi(0);
				}
				this.currents = index;
			},
			// 昨天“-1”今天“0”明天“1”
			riqi(day) {
				let dd = new Date();
				dd.setDate(dd.getDate() + day);
				let y = dd.getFullYear();
				let m = dd.getMonth() + 1 < 10 ? "0" + (dd.getMonth() + 1) : dd.getMonth() + 1;
				let d = dd.getDate() < 10 ? "0" + dd.getDate() : dd.getDate();
				return y + "-" + m + "-" + d;
			},
			// 本月第一天
			benyue() {
				let y = new Date().getFullYear(); //获取年份
				let m = new Date().getMonth() + 1; //获取月份
				let d = '01'
				m = m < 10 ? '0' + m : m; //月份补 0
				return [y, m, d].join("-")
			},
			close() {
				this.show = false
			},
			starttime() {
				this.shows = true;
			},
			endtime() {
				this.showss = true;
			},
			confirm(e) {
				this.shows = false;
				this.mindates = e.value
				this.start = this.date(e.value);
				this.end = "结束时间"
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.end = this.date(e.value);
				this.currents = -1;
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			// 打开地图
			openmap(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.address, //即将传到高德或腾讯地图的店铺名称
					address: item.address, //即将传到高德或腾讯地图的详细地址
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			// 编辑
			edit(url, val) {
				uni.navigateTo({
					url: url + val
				})
			},
			// 米，公里转换
			kmUnit(m) {
				var v;
				if (typeof m === 'number' && !isNaN(m)) {
					if (m >= 1000) {
						v = (m / 1000).toFixed(2) + 'km'
					} else {
						v = m + 'm'
					}
				} else {
					v = '0m'
				}
				return v;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.surebtn {
		width: 45%;
	}

	.reset {
		background: #ebb563;
	}

	.input-text {
		width: 488rpx;
		padding: 18rpx 0 18rpx 32rpx;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.sousuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.ylable {
		position: absolute;
		right: -30rpx;
		top: -30rpx;
		padding: 10rpx 30rpx;
		font-size: 20rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #C8101C;
		background-color: #FAE1E1;
		line-height: 23rpx;
		border-bottom-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.importtwo {
		color: #FFAE68;
		background-color: #F9EBDD;
	}

	.importthree {
		color: #FFAE68;
		background-color: #F9EBDD;
	}

	.importfour {
		color: #478FDB;
		background-color: #E2EDFB;
	}

	.importfive {
		color: #59C38F;
		background-color: #E3F2E8;
	}

	// 顶部搜索
	.searchimg {
		width: 24rpx;
		height: 24rpx;
		background-image: url("@/static/image/system/search.png");
		background-size: 100% 100%;
	}

	.itemscreenfocus {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
		background-color: #e7f9fa;
	}

	.searchbox {
		width: 35%;
		padding: 12rpx 20rpx;
		box-sizing: border-box;
		background-color: #f3f3f3;
		border-radius: 50rpx;

		input {
			width: 80%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	.selectboxtop {
		width: 40%;
		padding: 12rpx 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		background-color: #f7f9fa;
		border-radius: 50rpx;

		input {
			width: 80%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	.selectboxtop2 {
		width: 100%;
		padding: 12rpx 20rpx;
		height: 80rpx;
		line-height: 80rpx;
		box-sizing: border-box;
		background-color: #f7f9fa;
		border-radius: 50rpx;

		input {
			width: 80%;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
		}
	}

	// tab切换
	.selectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		line-height: 33rpx;
		background-color: #e1f4f5;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.noselectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 33rpx;
		background-color: #eff0f0;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.selecttimetext {
		font-size: 24rpx;
		font-family: San Francisco Display-Medium, San Francisco Display;
		font-weight: 500;
		color: #666666;
		line-height: 24rpx;
	}

	// 内容
	.smalltext {
		width: 300rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.dizhi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
	}

	.screenbox {
		width: 33.33%;
	}

	.itemscreen {
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 50rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
		background-color: #f7f9fa;
	}

	.inputscreenbox {
		width: 40%;

		input {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 50rpx;
			font-size: 28rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #999;
			background-color: #f7f9fa;
		}
	}

	.zwscreenbox {
		width: 20%;
		line-height: 80rpx;
	}

	.labletext1 {
		color: #ff0000;
	}

	.labletext2 {
		color: #ffa126;
	}
</style>